<div class="layout-padding"
     fxLayout="row">

  <div fxLayout="column">

    <pre>Fruits</pre>

    <mat-list dndDropzone
              dndEffectAllowed="move"
              (dndDrop)="onDrop($event, fruits)"
              class="dndList">

      <mat-list-item dndPlaceholderRef
                     class="dndPlaceholder">
      </mat-list-item>

      <mat-list-item *ngFor="let fruit of fruits"
                     [dndDraggable]="fruit"
                     [dndType]="fruit"
                     dndEffectAllowed="move"
                     (dndMoved)="onDragged(fruit, fruits)">
        <h1 mat-line>{{fruit}}</h1>
      </mat-list-item>

    </mat-list>

  </div>

  <div fxLayout="column">

    <pre>Apples</pre>

    <mat-list [dndDropzone]="['apple']"
              dndEffectAllowed="move"
              (dndDrop)="onDrop($event, apples)"
              class="dndList">


      <mat-list-item dndPlaceholderRef
                     class="dndPlaceholder">
      </mat-list-item>

      <mat-list-item *ngFor="let apple of apples"
                     [dndDraggable]="apple"
                     [dndType]="apple"
                     dndEffectAllowed="move"
                     (dndMoved)="onDragged(apple, apples)">
        <h1 mat-line>{{apple}}</h1>
      </mat-list-item>

    </mat-list>

  </div>

  <div fxLayout="column">

    <pre>Bananas</pre>

    <mat-list [dndDropzone]="['banana']"
              dndEffectAllowed="move"
              (dndDrop)="onDrop($event, bananas)"
              class="dndList">

      <mat-list-item dndPlaceholderRef
                     class="dndPlaceholder">
      </mat-list-item>

      <mat-list-item *ngFor="let banana of bananas"
                     [dndDraggable]="banana"
                     [dndType]="banana"
                     dndEffectAllowed="move"
                     (dndMoved)="onDragged(banana, bananas)">
        <h1 mat-line>{{banana}}</h1>
      </mat-list-item>

    </mat-list>

  </div>

</div>
